<template>
  <div class="my_page_container">
    <div class="bg-white">
      <AmyQueryComboxItem
        search-label="报警类型"
        :search-type-arr="alarmTypeList"
        @make-search-condition="queryTable"
      />
    </div>
    <div class="bg-white">
      <q-table
        id="my-xls"
        bordered
        flat
        separator="cell"
        :tableTitle= "tableTitle"
        :columns="columns"
        row-key="name"
        :rows="dbFilterList"
        :pagination="dbPagination"
        :rows-per-page-options="[10,20]"
        selection="multiple"
        v-model:selected="selectedItems"
      >

        <!--  插槽：表格头部左侧    -->
        <template v-slot:top-left>
          <q-input outlined dense color="base" v-model="filterText" :input-style="{ width: '150px'}">
            <template v-slot:append>
              <q-icon name="search" color="indigo" />
            </template>
          </q-input>
        </template>

        <!--  插槽：表格头部右侧    -->
        <template v-slot:top-right>
          <div class="q-gutter-sm">
            <q-btn
              dense
              unelevated
              color="pink"
              label="导出"
              icon="mdi-database-export"
              @click="exportExcel"
            />
          </div>
        </template>

        <!--  插槽：某个单元格    -->
        <template #body-cell-operation="props">
          <q-td :props="props">
            <div class="q-gutter-sm text-center">
              <q-btn
                flat
                dense
                size="12px"
                color="primary"
                icon="mdi-credit-card-check"
                @click="dispatchTask(props.rowIndex)"
              />
            </div>
          </q-td>
        </template>

        <!--   底部插槽     -->
        <template v-slot:bottom>
          <AmyPagination :page-msg="dbPagination" @update="refreshTableAry"/>
        </template>
      </q-table>
    </div>
    <AlarmDlg
      ref="myAddDlgRef"
      :user-arr="userList"
      :dispose-type-arr="alarmDisposeTypeList"
      :item-data="getActiveItem()"
      @cancel-alarm-item="cancelAddDlg"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, reactive, watch, onUnmounted, defineAsyncComponent } from 'vue'
import { useMessageNotify } from 'src/hook/common/useMessageNotify';
import { ItemType } from 'src/hook/common/useCommonVisitType';
import { useCatalogTool } from 'src/hook/common/useCatalogTool';
import { CQueryParam } from 'src/components/basic/basicModel';
import { cinBaseUrlAPI } from 'src/util/CinBaseConst';
import { useUivCatalogTbl } from 'src/hook/editor/useUivCatalogTbl';
import { uivCatalogType } from 'src/util/UivBaseConst';

import api from 'axios';
import * as XLSX from 'xlsx';
import useCommonVisitDatabase from 'src/hook/common/useCommonVisitDatabase';
import { useSysCatalogTbl } from 'src/hook/useSysCatalogTbl';
import { sysCatalogType } from 'src/util/SysBaseConst';
const AmyQueryComboxItem = defineAsyncComponent(() => import('components/basic/AmyQueryComboxItem.vue'));

export default defineComponent({
  name: 'AlarmIndex',
  components: {
    AmyQueryComboxItem
  },

  setup (props, context) {
    //*********************************************************************************************
    //      消息通知
    //*********************************************************************************************
    //消息通知
    const {
      showMessage
    } = useMessageNotify();

    //*********************************************************************************************
    //      查询模块
    //*********************************************************************************************
    //查询输入参数
    let queryParam = reactive({
      id: 0,
      name: '',
      startDate: '',
      endDate: ''
    });

    //有条件查询
    const queryTable = (s: CQueryParam) => {
      queryParam.id = 0;
      queryParam.name = s.name;
      queryParam.startDate = s.startDate;
      queryParam.endDate = s.endDate;

      //有条件查询
      loadList();
    }

    //*********************************************************************************************
    //      读取表格数据
    //*********************************************************************************************
    //检索响应数据
    const state = reactive({
      itemData: {
        id: 0,
        devIp: '',
        ioType: '',
        ioAddr: 0,
        alarmType: '',
        alarmValue: 0,
        createTime: ''
      }
    });

    //查询数据库
    const fetchApi = () => {
      return api.post(cinBaseUrlAPI.CIN_ALARM_API_LIST, {
        projectId: 1,
        startDate: queryParam.startDate,
        endDate: queryParam.endDate,
        pageNum: dbPagination.value.pageNum,
        pageSize: dbPagination.value.pageSize
      });
    };

    //删除记录
    const deleteApi = (item: ItemType) => {

    };

    //增加记录
    const confirmAddApi = (item: ItemType) => {

    };

    //修改记录
    const confirmEditApi = (item: ItemType) => {

    };


    const {
      dbList,
      dbFilterList,
      dbPagination,
      dbCurrentIndex,
      getActiveItem,
      filterList,
      loadList
    } = useCommonVisitDatabase(state.itemData, fetchApi, confirmAddApi, confirmEditApi, deleteApi);

    //*********************************************************************************************
    //      目录管理
    //*********************************************************************************************
    const {
      findCatalogLabel,
      findCatalogId
    } = useCatalogTool();

    const {
      userList,
      getCatalog,
      removeCatalog
    } = useSysCatalogTbl();

    const {
      alarmDisposeTypeList,
      getUivCatalog,
      removeUivCatalog
    } = useUivCatalogTbl();

    //*********************************************************************************************
    //           部门表格
    //*********************************************************************************************
    const columns = [
      {
        name: 'id',
        required: true,
        label: 'ID号',
        align: 'center',
        field: (row:any) => (row.id),
        sortable: true
      },
      { name: 'devIp', align: 'center', label: '设备Ip', field: 'devIp' },
      { name: 'ioType', align: 'center', label: 'IO类型', field: 'ioType' },
      { name: 'ioAddr', align: 'center', label: 'io地址', field: 'ioAddr' },
      { name: 'alarmType', align: 'center', label: '报警类型', field: 'alarmType' },
      { name: 'alarmValue', align: 'center', label: '报警值', field: 'alarmValue' },
      { name: 'createTime', align: 'center', label: '报警时间', field: 'createTime' },
      { name: 'operation', align: 'center', label: '派工', field: 'operation' }
    ];

    let tableTitle = ref('部门管理列表');
    let selectedItems = ref([]);
    let filterText = ref('');

    //检索显示
    const searchTableAry = () => {
      filterList(filterText.value);
    }


    //更新分页组件
    const refreshTableAry = (pageNum: number) => {
      dbPagination.value.pageNum = pageNum;
      loadList();
    }

    //导出excel
    const exportExcel = () => {
      let workbook = XLSX.utils.table_to_book(document.getElementById('my-xls')); //需要在table上定义一个id
      try {
        XLSX.writeFile(workbook, 'BOX信息.xlsx');
      } catch (e) {
        showMessage('导出失败,失败信息:!');
      }
    }

    //派工
    const dispatchTask = (index: number) => {

    }

    //*********************************************************************************************
    //      启动模块
    //*********************************************************************************************
    //初始化
    const init = () => {
      //读取数据库
      loadList();

      //读取目录
      getCatalog(sysCatalogType.USER_CODE);
      getUivCatalog(uivCatalogType.ALARM_DISPOSE_TYPE_CODE);
    }

    //监视检索框
    watch(filterText, () => {
      searchTableAry();
    });

    //加载
    onMounted(() => {
      init();
    })

    //销毁数据
    onUnmounted(() => {
      removeCatalog(sysCatalogType.USER_CODE);
      removeUivCatalog(uivCatalogType.ALARM_DISPOSE_TYPE_CODE);
    });

    return {
      queryTable,

      findCatalogLabel,
      findCatalogId,

      userList,
      alarmDisposeTypeList,

      columns,
      tableTitle,
      selectedItems,
      filterText,
      searchTableAry,
      refreshTableAry,

      dbList,
      dbFilterList,
      dbPagination,
      dbCurrentIndex,
      getActiveItem,

      exportExcel,
      dispatchTask
    }
  }
})
</script>

<style scoped>

</style>
